// import：导入 样式
@import "common.less";

* {
    padding: 0;
    margin : 0;
}

body {
    min-width       : 320px;
    max-width       : 750px;
    margin          : 0 auto;
    height          : 6000px;
    background-color: rgba(0, 0, 0, .05);
}

div,
header,
a {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

em,
i {
    font-style: normal;
}

.clearfix::after {
    content   : "";
    display   : block;
    height    : 0;
    visibility: hidden;
    clear     : both;
}

.clearfix {
    *zoom: 1;
}

.spanc {
    background      : #FFF;
    color           : #d9a87a;
    font-size       : 22rem / @number;
    // border       : 1rem / @number solid #d9a87a;
    border-radius   : 20rem / @number;
    text-align      : center;
    width           : 90rem / @number;
    height          : 28rem / @number;
    line-height     : 28rem / @number;
}

.cxb {
    font-size: 26rem / @number;
}

.btr {
    border-bottom-right-radius: 20rem / @number;
}

.btl {
    border-bottom-left-radius: 20rem / @number;
}

@number  : 750 / 15;
@bg_color: #FFDB47;

// 头部

.top_header {
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    align-items     : center;
    background-color: @bg_color;
    width           : 100%;
    padding         : 34rem / @number;
    box-sizing      : border-box;
    height          : 88rem / @number;

    .img-1 {
        width : 450rem / @number;
        height: 55rem / @number;

        img {
            width : 100%;
            height: 100%;
        }
    }

    .img-2 {
        width : 36rem / @number;
        height: 60rem / @number;

        img {
            width : 100%;
            height: 100%;
        }
    }
}

// 搜索栏
.content {
    position        : relative;
    width           : 100%;
    height          : 92rem / @number;
    padding         : 0 24rem / @number;
    background-color: @bg_color;

    a {
        display         : inline-block;
        width           : 702rem / @number;
        height          : 64rem / @number;
        line-height     : 64rem / @number;
        background-color: #FFF8DA;
        margin-top      : 15rem / @number;
        border-radius   : 44rem / @number;
        font-size       : 25rem / @number;
        color           : #999;
        padding-left    : 65rem / @number;


    }

    i {
        position       : absolute;
        top            : 30rem / @number;
        left           : 45rem / @number;
        display        : block;
        width          : 36rem / @number;
        height         : 36rem / @number;
        background     : url(../images/search.png) no-repeat center center;
        background-size: 36rem / @number;
    }
}

// banner
.slider {
    position: relative;
    width: 100%;
    height: 260rem / @number;

    .slider_bgimg {
        width: 100%;
        height: 100%;
    }

    .slider_content {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 702rem / @number;
        height: 260rem / @number;
        overflow: hidden;
        ul {
            width: 500%;

            transform: translateX(-702rem / @number);
            transition: all .3s;
            li {
                float: left;
            }
            img {
                width: 702rem / @number;
                height: 260rem / @number;
                border-radius: 20rem / @number;
            }
        }
        ol {
            position: absolute;
            left: 50%;
            bottom: 12rem / @number;
            transform: translateX(-50%);
            li {
                float: left;
                width: 8rem / @number;
                height: 8rem / @number;
                background-color: #ccc;
                border-radius: 4rem / @number;
                margin: 0 3rem / @number;

            }
            .current {
                width: 16rem / @number;
                background-color: #fff;
            }
        }
    }
    

}

// 导航
.nav {
    li {
        float : left;
        width : 150rem / @number;
        height: 142rem / @number;


        a {
            text-align     : center;
            display        : flex;
            flex-direction : column;
            justify-content: flex-end;
            align-items    : center;
            width          : 150rem / @number;
            height         : 142rem / @number;

            img {
                width : 84rem / @number;
                height: 84rem / @number;
            }

            p {
                font-size : 23rem / @number;
                color     : #666;
                margin-top: 5rem / @number;
            }
        }

    }
}

// 图片
.img {
    margin-top      : 20rem / @number;
    width           : 100%;
    height          : 220rem / @number;
    background-color: rgba(0, 0, 0, .05);


    a {
        float : left;
        width : 250rem / @number;
        height: 220rem / @number;


        img {
            width : 250rem / @number;
            height: 220rem / @number;
        }
    }
}

.img1 {
    display        : flex;
    justify-content: space-between;
    width          : 750rem / @number;
    height         : 234rem / @number;
    margin         : 20rem / @number 0;

    .a1 {
        width : 373.51rem / @number;
        height: 234rem / @number;

        img {
            width: 100%;
        }
    }

    .a2 {
        width : 186.25rem / @number;
        height: 234rem / @number;

        img {
            width: 100%;
        }
    }

    .a3 {
        width : 186.25rem / @number;
        height: 234rem / @number;

        img {
            width: 100%;
        }
    }
}

// 限时抢购
.xsqg {
    width              : 702rem / @number;
    height             : 258rem / @number;
    // background-color: #FFDB47;
    margin             : 0rem / @number auto;


    .xsqg-r {
        border-top-right-radius  : 20rem / @number;
        // border-top-left-radius: 1rem / @number;

    }

    .xsqg-l {
        border-top-left-radius: 20rem / @number;
    }

    .xsqg-x-r {
        border-right: 0.5rem / @number solid #ccc;
    }

    .xsqg-x-x {
        border-bottom: 0.5rem / @number solid #ccc;
    }

    .xsqg-c {
        float           : left;
        width           : 350rem / @number;
        height          : 258rem / @number;
        background-color: #fff;

        .xsqg-xsqg {
            height       : 58rem / @number;
            margin-bottom: 3rem / @number;

            .xsqg-xsqg-l {
                float      : left;
                font-size  : 32rem / @number;
                color      : #333;
                font-weight: 700;
                margin     : 18rem / @number 8rem / @number 0 24rem / @number;
            }

            .xsqg-xsqg-r {
                margin     : 25rem / @number 0 0;
                float      : left;
                font-size  : 20rem / @number;
                color      : #333;
                font-weight: 700;

                span {
                    text-align      : center;
                    display         : inline-block;
                    width           : 34rem / @number;
                    height          : 28rem / @number;
                    line-height     : 28rem / @number;
                    background-color: #FFcc00;
                    border-radius   : 10rem / @number;
                    margin-right    : 5rem / @number;
                }
            }
        }

        p {
            font-size  : 24rem / @number;
            color      : #999;
            margin-left: 24rem / @number;
        }

        .xsqg-l-b {
            margin-top: 5rem / @number;
            width     : 350rem / @number;
            height    : 149rem / @number;

            .xsqg-img1 {
                position   : relative;
                margin-left: 28rem / @number;
                float      : left;
                width      : 120rem / @number;
                height     : 149rem / @number;

                img {
                    width : 120rem / @number;
                    height: 120rem / @number;
                }

                span {
                    position  : absolute;
                    left      : 0;
                    bottom    : 0;
                    text-align: center;
                    display   : inline-block;
                    font-size : 22rem / @number;
                    color     : #ff5500;
                    width     : 120rem / @number;
                    height    : 28rem / @number;
                }

                .sbg {
                    position   : absolute;
                    left       : -15rem / @number;
                    bottom     : 0;
                    width      : 150rem / @number;
                    height     : 54rem / @number;
                    line-height: 70rem / @number;
                    color      : #333;
                    background : url(../images/下载.png) no-repeat center center;
                }
            }

            .xsqg-img2 {
                position   : relative;
                margin-left: 28rem / @number;
                float      : left;
                width      : 120rem / @number;
                height     : 149rem / @number;

                img {
                    width : 120rem / @number;
                    height: 120rem / @number;
                }

                span {
                    position  : absolute;
                    left      : 0;
                    bottom    : 0;
                    text-align: center;
                    display   : inline-block;
                    font-size : 22rem / @number;
                    color     : #ff5500;
                    width     : 120rem / @number;
                    height    : 28rem / @number;
                }

                .sbg {
                    position   : absolute;
                    left       : -15rem / @number;
                    bottom     : 0;
                    color      : #333;
                    width      : 150rem / @number;
                    height     : 54rem / @number;
                    line-height: 70rem / @number;
                    background : url(../images/下载.png) no-repeat center center;
                }
            }
        }

    }

}

// 为你推荐
.wntj {
    width           : 702rem / @number;
    height          : 172rem / @number;
    background-color: #fff;
    margin          : 0 auto;
    border-bottom   : 0.5rem / @number solid #ccc;

    .wntj-wntj {
        float     : left;
        width     : 173rem / @number;
        height    : 172rem / @number;
        text-align: center;
        box-sizing: border-box;
        padding   : 48rem / @number 18rem / @number 0;

        .p1 {
            font-size: 32rem / @number;
            color    : #444;
        }

        .p2 {
            font-size: 24rem / @number;
            color    : #999;
        }
    }

    a {
        float     : left;
        width     : 120rem / @number;
        height    : 172rem / @number;
        text-align: center;

        img {
            width     : 100rem / @number;
            margin-top: 20rem / @number;
        }

        p {
            font-size: 22rem / @number;
            color    : #333;
        }
    }
}

// 苏宁头条
.sntt {
    width                     : 702rem / @number;
    height                    : 66rem / @number;
    background-color          : #fff;
    margin                    : 0 auto;
    border-bottom-left-radius : 20rem / @number;
    border-bottom-right-radius: 20rem / @number;

    img {
        float : left;
        margin: 16rem / @number 16rem / @number;
        width : 112rem / @number;
        height: 31rem / @number;
    }

    div {
        position   : relative;
        float      : left;
        width      : 530rem / @number;
        height     : 66rem / @number;
        line-height: 66rem / @number;


        i {
            position        : absolute;
            top             : 20rem / @number;
            left            : 0;
            display         : inline-block;
            width           : 56rem / @number;
            height          : 24rem / @number;
            line-height     : 24rem / @number;
            font-size       : 18rem / @number;
            color           : #222;
            text-align      : center;
            background-color: #FFcc00;
            border-radius   : 15rem / @number;
        }

        span {
            position  : absolute;
            top       : 22rem / @number;
            left      : 65rem / @number;
            font-size : 24rem / @number;
            color     : #333;
            margin-top: -25rem / @number;
        }
    }
}

// 双十一
.ssy {
    position: relative;
    width   : 750rem / @number;
    height  : 230rem / @number;

    img {
        width: 100%;
    }

    .ssyimg {
        position: absolute;
        left    : 50rem / @number;
        top     : 50rem / @number;
        width   : 123rem / @number;
    }
}

.sssy {
    width : 750rem / @number;
    height: 210rem / @number;

    img {
        float : left;
        width : 250rem / @number;
        height: 210rem / @number;
    }
}

// 商品栏
.spl {
    width : 750rem / @number;
    height: 612rem / @number;

    ul {
        width : 750rem / @number;
        height: 600rem / @number;

        li {
            position: relative;
            float   : left;

            img {
                position: absolute;
                top     : 25rem / @number;
                left    : 37rem / @number;
                width   : 140rem / @number;
            }

            p {
                position  : absolute;
                left      : 50rem / @number;
                bottom    : 75rem / @number;
                font-size : 26rem / @number;
                color     : #fff;
                text-align: center;
            }

            span {
                position  : absolute;
                left      : 50rem / @number;
                bottom    : 45rem / @number;
                font-size : 22rem / @number;
                color     : #fff;
                text-align: center;
            }
        }

        .li-1 {
            width          : 196rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-1.png) no-repeat center center;
            background-size: 196rem / @number;
        }

        .li-2 {
            width          : 179rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-2.png) no-repeat center center;
            background-size: 179rem / @number;

            img {
                position: absolute;
                top     : 25rem / @number;
                left    : 20rem / @number;
                width   : 140rem / @number;
            }

            p {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 75rem / @number;
                font-size : 26rem / @number;
                color     : #fff;
                text-align: center;
            }

            span {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 45rem / @number;
                font-size : 22rem / @number;
                color     : #fff;
                text-align: center;
            }
        }

        .li-3 {
            width          : 179rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-2.png) no-repeat center center;
            background-size: 179rem / @number;

            img {
                position: absolute;
                top     : 25rem / @number;
                left    : 20rem / @number;
                width   : 140rem / @number;
            }

            p {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 75rem / @number;
                font-size : 26rem / @number;
                color     : #fff;
                text-align: center;
            }

            span {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 45rem / @number;
                font-size : 22rem / @number;
                color     : #fff;
                text-align: center;
            }
        }

        .li-4 {
            width          : 196rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-3.png) no-repeat center center;
            background-size: 196rem / @number;

            img {
                position: absolute;
                top     : 25rem / @number;
                left    : 20rem / @number;
                width   : 140rem / @number;
            }

            p {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 75rem / @number;
                font-size : 26rem / @number;
                color     : #fff;
                text-align: center;
            }

            span {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 45rem / @number;
                font-size : 22rem / @number;
                color     : #fff;
                text-align: center;
            }
        }

        .li-5 {
            width          : 196rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-1.png) no-repeat center center;
            background-size: 196rem / @number;
        }

        .li-6 {
            width          : 179rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-2.png) no-repeat center center;
            background-size: 179rem / @number;

            img {
                position: absolute;
                top     : 25rem / @number;
                left    : 20rem / @number;
                width   : 140rem / @number;
            }

            p {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 75rem / @number;
                font-size : 26rem / @number;
                color     : #fff;
                text-align: center;
            }

            span {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 45rem / @number;
                font-size : 22rem / @number;
                color     : #fff;
                text-align: center;
            }
        }

        .li-7 {
            width          : 179rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-2.png) no-repeat center center;
            background-size: 179rem / @number;

            img {
                position: absolute;
                top     : 25rem / @number;
                left    : 20rem / @number;
                width   : 140rem / @number;
            }

            p {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 75rem / @number;
                font-size : 26rem / @number;
                color     : #fff;
                text-align: center;
            }

            span {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 45rem / @number;
                font-size : 22rem / @number;
                color     : #fff;
                text-align: center;
            }
        }

        .li-8 {
            width          : 196rem / @number;
            height         : 300rem / @number;
            background     : url(../upload/li-3.png) no-repeat center center;
            background-size: 196rem / @number;

            img {
                position: absolute;
                top     : 25rem / @number;
                left    : 20rem / @number;
                width   : 140rem / @number;
            }

            p {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 75rem / @number;
                font-size : 26rem / @number;
                color     : #fff;
                text-align: center;
            }

            span {
                position  : absolute;
                left      : 30rem / @number;
                bottom    : 45rem / @number;
                font-size : 22rem / @number;
                color     : #fff;
                text-align: center;
            }
        }
    }

    .yct {
        position: relative;
        width   : 750rem / @number;
        height  : 12rem / @number;

        img {
            position: absolute;
            top     : 0;
            width   : 750rem / @number;
            height  : 12rem / @number;
        }
    }
}

// 推荐榜单
.tjbd {
    margin-top: 20rem / @number;
    width     : 750rem / @number;
    height    : 833rem / @number;


    .tjbd-img {
        width : 750rem / @number;
        height: 60rem / @number;

        img {
            width: 100%;
        }
    }

    // 内容
    .tjbd-bd {
        width : 750rem / @number;
        height: 760rem / @number;

        // 人气榜
        .rqb {
            width        : 702rem / @number;
            height       : 266rem / @number;
            margin       : 0 auto;
            margin-bottom: 20rem / @number;

            .rqb-box {
                position        : relative;
                float           : left;
                border-radius   : 20rem / @number;
                margin-left     : 6rem / @number;
                background-color: #fff;
                width           : 226rem / @number;
                height          : 266rem / @number;

                .img1 {
                    position: absolute;
                    top     : 0rem / @number;
                    left    : 40rem / @number;
                    width   : 150rem / @number;
                    height  : 150rem / @number;
                }

                .img2 {
                    position: absolute;
                    bottom  : 0;
                    width   : 226rem / @number;
                    height  : 93rem / @number;
                }

                .spanc {
                    background   : #FFF;
                    color        : #d9a87a;
                    font-size    : 22rem / @number;
                    position     : absolute;
                    top          : 155rem / @number;
                    left         : 65rem / @number;
                    border       : 1rem / @number solid #d9a87a;
                    border-radius: 20rem / @number;
                    text-align   : center;
                    width        : 100rem / @number;
                    height       : 34rem / @number;
                    line-height  : 34rem / @number;
                }

                .p1 {
                    position : absolute;
                    top      : 195rem / @number;
                    left     : 22rem / @number;
                    font-size: 26px;
                    color    : #FFF;
                }

                .p2 {
                    position : absolute;
                    top      : 230rem / @number;
                    left     : 48rem / @number;
                    font-size: 22px;
                    color    : #FFF;
                }
            }

            .rqb-box-2 {
                position        : relative;
                float           : left;
                border-radius   : 20rem / @number;
                margin-left     : 6rem / @number;
                background-color: #fff;
                width           : 226rem / @number;
                height          : 266rem / @number;

                .img1 {
                    position: absolute;
                    top     : 0rem / @number;
                    left    : 40rem / @number;
                    width   : 150rem / @number;
                    height  : 150rem / @number;
                }

                .img2 {
                    position: absolute;
                    bottom  : 0;
                    width   : 226rem / @number;
                    height  : 93rem / @number;
                }

                span {
                    background   : #FFF;
                    color        : #fb7f0a;
                    font-size    : 22rem / @number;
                    position     : absolute;
                    top          : 155rem / @number;
                    left         : 65rem / @number;
                    border       : 1rem / @number solid #fb7f0a;
                    border-radius: 20rem / @number;
                    text-align   : center;
                    width        : 100rem / @number;
                    height       : 34rem / @number;
                    line-height  : 34rem / @number;
                }

                .p1 {
                    position : absolute;
                    top      : 195rem / @number;
                    left     : 22rem / @number;
                    font-size: 26px;
                    color    : #FFF;
                }

                .p2 {
                    position : absolute;
                    top      : 230rem / @number;
                    left     : 48rem / @number;
                    font-size: 22px;
                    color    : #FFF;
                }
            }
        }
    }
}

.kkk {
    float : left;
    width : 750rem / @number;
    height: 30rem / @number;

}

// 猜你喜欢
.cnxh {
    float: left;
    width: 750rem / @number;


    .cnxh-img {
        width : 750rem / @number;
        height: 60rem / @number;

        img {
            width: 100%;
        }
    }

    .sp {
        float           : left;
        margin-left     : 20rem / @number;
        width           : 342rem / @number;
        height          : 542rem / @number;
        background-color: #FFF;
        border-radius   : 20rem / @number;
        

        img {
            border-radius: 20rem / @number;
            width        : 342rem / @number;
            height       : 342rem / @number;
        }

        p {
            font-size: 26rem / @number;
            color    : #333;
            margin   : 12rem / @number 18rem / @number 0;
        }

        .sp-s {
            display         : inline-block;
            width           : 48rem / @number;
            height          : 24rem / @number;
            line-height     : 24rem / @number;
            text-align      : center;
            font-size       : 18rem / @number;
            color           : #333;
            background-color: #FFcc00;
            border-radius   : 5rem / @number;

        }

        .sp-ss {
            display         : inline-block;
            height          : 24rem / @number;
            line-height     : 24rem / @number;
            text-align      : center;
            font-size       : 18rem / @number;
            color           : #333;
            background-color: #FFcc00;
            border-radius   : 5rem / @number;
            padding         : 0 5rem / @number;
        }

        div {
            width  : 330rem / @number;
            height : 38rem / @number;
            padding: 0 10rem / @number;

            span:nth-child(1) {
                font-size: 36rem / @number;
                color    : #ff4422;
            }

            span:nth-child(2) {
                font-size: 20rem / @number;
                color    : #999;

            }
        }
    }

}